import regeneratorRuntime from '../../lib/runtime/runtime';
/* 
1 引入 用来请求的 方法
2 wechat miniprogram, 一定要把路径补全
*/
import {
  request
} from "../../request/index.js"

// pages/category/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 左侧菜单数据, 最好写上
    leftMenuList: [],
    // 右侧商品数据
    rightContent: [],
    // 被点击的左侧菜单的索引值
    currentIndex: 0,
    // 右侧内容的滚动条距离顶部的距离
    // scrollTop: 0
    // scrollTop
  },
  /*
  *1 接口的返回数据
  *2 将数组放在data配置项外面, 方便调用和重构数组, 被析构素组放在data外,重构数组放在data配置项里面
  */ 
  Cates: [],

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // this.getCates()

    /*    
    0 web中的本地存储和 小程序中的本地存储的区别
      1 写代码的方式不一样了
        web: localstorage.setItem("key","value")localstorage.getItem("key"小程序中:wx.setstoragesync("key","value");wx.getstoragesync("key");
      2:存的时候 有没有做类型转换
        web:不管存入的是什么类型的数据，最终都会先调用以下 tostring(),把数据变成了字符串 再存入进去
        小程序:不存在 类型转换的这个操作 存什么类似的数据进去，获取的时候就是什么类型

    1 先判断一下本地缓存中有没有旧的数据
      存储的格式: {time:Date.now(), data:[...]}
    2 没有旧数据 直接发送新请求
    3 有旧数据 同时旧数据也没有过期 就使用本地存储中的旧数据即可
    4 有旧数据 但是过期了 就重新发送请求
    */

    /* 
    1 获取本地存储中的数据 (小程序中也是存在本地存储 技术)
    2 const Cates 和 this.Cates[] 格式不同, 对象和数组的区别
    3 cates无法定义,只能出现在设置和获取storageSync数据里面,Lazy code loading is enabled. Only injecting required components.
      ReferenceError: cates is not defined
    4 同时cates包含有时间戳!!
    */
    const Cates = wx.getStorageSync('cates');

    // console.log("const Cates:",cates)
    console.log("const Cates:",Cates)
    console.log(Boolean(Cates));
    console.log(Boolean(!Cates));
    // 2 判断
    if (!Cates) {
      // 不存在 发送请求获取数据
      this.getCates();
    } else {
      // 有旧数据 定义过期时间 10s 改成 5分钟
      if (Date.now() - Cates.time > 1000 * 10) {
        // 重新发送请求
        this.getCates();
      }else{
        // 可以使用旧数据
        console.log("可以使用旧数据")
        /* 
        1 将设置接口数据变量名,cates中的数据cates.data重新赋值一次,给this.Cates; 多赋值一次,防止数据混乱???
        2 绕一圈回来再赋值给全局接口数据数组,关键是具有程序设计上考量,Cates对象,里面具有data属性和时间戳属性的键值对 
        */

        this.Cates = Cates.data;

        console.log("Cates.data",Cates.data)
        /* 
        1 重新给分类页面左右侧赋值
        2 构造左侧的大菜单数据
        */
        let leftMenuList = this.Cates.map(v => v.cat_name);
        // let leftMenuList1 = this.Cates.map(v=>v.cat_icon)
        // 构造右侧的大菜单商品数据
        let rightContent = this.Cates[0].children;
        this.setData({
          /* 
          1 相当一个json键值对,键和值都是同一个变量
          2 在请求方法里面,将数据源存入data里面
          3 根据不同的索引来渲染右侧的商品内容
          */
          leftMenuList,
          // leftMenuList1
          rightContent,
        })
      }
    }
  },

  // 获取分类数据
  async getCates() {
    /*request({
      // url:"https://api-hmugo-web.itheima.net/api/public/v1/categories"
      url: "/category"
    })
       .then(res => {
        // console.log(res)
        // 此时,数据已经请求成功了
        this.Cates = res.data.message */

        /* 
        1 把接口的数据存入到本地存储中
        2 三个参数: 数据名字, 时间戳, 数据源
        */
        /* wx.setStorageSync('cates', {
          time: Date.now(), data: this.Cates
        })

        // 构造左侧的大菜单数据
        let leftMenuList = this.Cates.map(v => v.cat_name);
        // let leftMenuList1 = this.Cates.map(v=>v.cat_icon)
        // 构造右侧的大菜单商品数据
        let rightContent = this.Cates[0].children;
        this.setData({ */
          /* 
          1 相当一个json键值对,键和值都是同一个变量
          2 在请求方法里面,将数据源存入data里面
          3 根据不同的索引来渲染右侧的商品内容
          */
          /* leftMenuList,
          // leftMenuList1
          rightContent,
        })
          // 承兑出现
      }) */

      /* 
      1 使用es7的async await来发送请求 // 使用es7的async await来发送请求
      2 es7一行代码,代替异步api里面的两行代码
      */
      const res=await request({url:"/category"})
      // const res=await request({url:"/categories"})
      // 此时,数据已经请求成功了
      // this.Cates = res.data.message 
      /*
      success: (result) => {
        // result就表示请求成功后的值,此时就把里面的数组直接赋值给res
        resolve(result.data.message)
      },
      */
     console.log("res",res)
      this.Cates = res
      console.log("this.Cates",this.Cates) 

      /* 
      1 把接口的数据存入到本地存储中
      2 三个参数: 数据名字, 时间戳, 数据源
      */
      wx.setStorageSync('cates', {
        time: Date.now(), data: this.Cates
      })

      // 构造左侧的大菜单数据
      let leftMenuList = this.Cates.map(v => v.cat_name);
      // let leftMenuList1 = this.Cates.map(v=>v.cat_icon)
      // 构造右侧的大菜单商品数据
      let rightContent = this.Cates[0].children;
      this.setData({ 
        /* 
        1 相当一个json键值对,键和值都是同一个变量
        2 在请求方法里面,将数据源存入data里面
        3 根据不同的索引来渲染右侧的商品内容
        */
        leftMenuList,
        // leftMenuList1
        rightContent,
      })
},

  /* 
  1 左侧菜单的点击事件
  2 事件源 e
  */
  handleItemTap(e) {
    console.log(e)
    // dataset: {index:4} 是一个对象,不是字符串,所以使用一对大括号
    // const {index} = e.currentTarget.dataset;
    // 对于对象, let和const都可以定义对象变量
    let { index } = e.target.dataset;
    // console.log(index)
    // 构造右侧的大菜单商品数据
    const rightContent = this.Cates[index].children;
    this.setData({
      currentIndex: index,
      rightContent,
      // 重新设置右侧内容的scroll-view标签的距离顶部的距离
      // 反复设计scrollTop的值为0,才能实现滚动置顶效果
      scrollTop: 0
    })


  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    const Cates = wx.getStorageSync('cates');

    // console.log("const Cates:",cates)
    console.log("const Cates:",Cates)
    console.log(Boolean(Cates));
    console.log(Boolean(!Cates));
    // 2 判断
    if (!Cates) {
      // 不存在 发送请求获取数据
      this.getCates();
    } else {
      // 有旧数据 定义过期时间 10s 改成 5分钟
      if (Date.now() - Cates.time > 1000 * 10) {
        // 重新发送请求
        this.getCates();
      }else{
        // 可以使用旧数据
        console.log("可以使用旧数据")
        /* 
        1 将设置接口数据变量名,cates中的数据cates.data重新赋值一次,给this.Cates; 多赋值一次,防止数据混乱???
        2 绕一圈回来再赋值给全局接口数据数组,关键是具有程序设计上考量,Cates对象,里面具有data属性和时间戳属性的键值对 
        */

        this.Cates = Cates.data;

        console.log("Cates.data",Cates.data)
        /* 
        1 重新给分类页面左右侧赋值
        2 构造左侧的大菜单数据
        */
        let leftMenuList = this.Cates.map(v => v.cat_name);
        // let leftMenuList1 = this.Cates.map(v=>v.cat_icon)
        // 构造右侧的大菜单商品数据
        let rightContent = this.Cates[0].children;
        this.setData({
          /* 
          1 相当一个json键值对,键和值都是同一个变量
          2 在请求方法里面,将数据源存入data里面
          3 根据不同的索引来渲染右侧的商品内容
          */
          leftMenuList,
          // leftMenuList1
          rightContent,
        })
      }
    }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})